/*
 * Created: 2020-08-21 14:54:05
 * Author : Mockingbird
 * Email : 1768385508@qq.com
 * -----
 * Description: 创建
 */

import React, {
    useState,
    useImperativeHandle,
    forwardRef,
    useCallback,
    useEffect,
  } from 'react'
  
  import Modal from '@components/Modal'
  import { Form } from 'antd'
  import request from '@utils/request'
  import apis from '@http/apis';
  
  const fetchType = () => {
    return new Promise((resolve,reject)=>{
      request.get(apis.getNewsType).then((res)=>{
        resolve(res)
      }).catch((err)=>{
        reject(err)
      })
    })
  }
  // eslint-disable-next-line react-hooks/rules-of-hooks
  
  interface IProps {
    selectedRows?: any[]
  }
  
  function Create(props: IProps, ref: any) {
    const [loading, setLoading] = useState(false)
    const [visible, setVisible] = useState(false)
    // const [formRef, setFormRef] = useState()
    const [form] = Form.useForm()
    const [newsType, setNewsType] = useState([])
    const meta = {
      columns: 1, //显示列数
      preserve: false,
      initialValues: {
        textarea: 'textarea',
      },
      // viewMode: true, //为ture,不能编辑
      // formItemLayout: [8, 16], // Must set this for inline layout
      fields: [
        // {
        //   // noFormItem: true,
        //   key: 'username', // 键
        //   label: '用户名',
        //   widget: 'input', // 自定义组件
        //   // initialValue: 'hello', // 默认值
        //   required: true, // 不能为空
        //   message: '用户名不能为空',
        //   placeholder: '请输入用户名',
        //   // tooltip: '提示信息', // 提示
        //   // formItemLayout: [30, 30], //label宽度，输入框宽度
        //   // validateTrigger: 'onClick',
        //   trigger: 'onChange',
        //   // forwardRef: true,
        //   // antd自带参数
        //   // help: '提示信息',
        //   // extra: '额外的提示信息',
        //   // noStyle: true,
        //   // validateStatus: 'warning',
        //   // hasFeedback: true,
        //   // readOnly: true,
        //   // viewMode: true,
        //   getValueProps: (value: any) => {
        //   },
        // },
        {
          // noFormItem: true,
          key: 'title', // 键
          label: '新闻标题',
          widget: 'input', // 自定义组件
          required: true, // 不能为空
          message: '新闻标题不能为空',
          placeholder: '请输入新闻标题',
          trigger: 'onChange',
          getValueProps: (value: any) => {
          },
        },
        {
          key: 'type_id',
          label: '新闻类型',
          widget: 'select',
          required: true, // 不能为空
          // initialValue: 1,
          placeholder: '请选择新闻类型',
          message: '请选择新闻类型',
          options: newsType,
        },
        {
          // noFormItem: true,
          key: 'tags', // 键
          label: '新闻标签',
          widget: 'input', // 自定义组件
          required: true, // 不能为空
          message: '新闻标签不能为空',
          placeholder: '请输入新闻标签',
          trigger: 'onChange',
          getValueProps: (value: any) => {
          },
        },
        {
          // noFormItem: true,
          key: 'cover', // 键
          label: '新闻封面',
          widget: 'input', // 自定义组件
          required: true, // 不能为空
          message: '新闻封面不能为空',
          placeholder: '请输入新闻封面',
          trigger: 'onChange',
          getValueProps: (value: any) => {
          },
        },
        {
          key: 'is_top', // 键
          name: 'is_top',
          label: '是否置顶',
          widget: 'switch',
          valuePropName: 'checked',
        },
        {
          key: 'status', // 键
          name: 'status',
          label: '是否发布',
          widget: 'switch',
          valuePropName: 'checked',
        },
        // {
        //   // noFormItem: true,
        //   key: 'doc', // 键
        //   label: '新闻内容',
        //   widget: 'editor', // 自定义组件
        //   required: true, // 不能为空
        //   message: '新闻内容不能为空',
        //   placeholder: '请输入新闻内容',
        //   trigger: 'onChange',
        //   getValueProps: (value: any) => {
        //   },
        // },
      ],
    }
  
    // const handleSubmit = useCallback((value: any) => {
    //   setLoading(true)
    //   setTimeout(() => {
    //     console.log(value)
    //     setLoading(false)
    //     setVisible(false)
    //   }, 3000)
    // }, [])
  
    const handleSubmit = () => {
      form.validateFields().then((values: any) => {
        setLoading(true)
        setTimeout(() => {
          console.log(values)
          setLoading(false)
          setVisible(false)
        }, 3000)
      })
    }
  
    const handleCancel = () => {
      setVisible(false)
    }
  
    useImperativeHandle(ref, () => ({
      // show 就是暴露给父组件的方法
      show: (selectedRows: any) => {
        setVisible(true)
      },
    }))
    useEffect(() => {
      // 获取新闻类型
      if(visible){
        fetchType().then((res:any)=>{
          const data = res.data.news_types || []
          const newstype = data.map((item:any)=>{
            return {
              label:item.name,
              value: item.id
            }
          })
          setNewsType(newstype)
        }).catch((err)=>{
          
        })
      }
      
    }, [visible])
    // useEffect(() => {
    //   console.log(22222)
    //   if (visible) {
    //     console.log(333333)
    //     if (food && !foodList[food]) {
    //       console.log(444444)
    //       fetchFood(food).then((arr: any) =>
    //         setFoodList((p) => ({ ...p, [food]: arr }))
    //       )
    //     }
    //   }
    // }, [food, foodList, visible])
    return (
 
        <Modal
          // setFormRef={setFormRef}
          form={form}
          visible={visible}
          title="创建新闻"
          confirmLoading={loading}
          draggable={true}
          centered={true}
          formData={meta}
          onSubmit={handleSubmit}
          onCancel={handleCancel}
        ></Modal>
       
      
    )
  }
  
  export default forwardRef(Create)